<template>

  <div style="width: 40%;margin-top: 5%;">
    <br>
    <br>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" v-if="ps=='超管'">
      <el-form-item label="工号" prop="userNumber">
        <el-input v-model="ruleForm.userNumber"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="ruleForm.sex" placeholder="请选择性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号码" prop="phoneNumber">
        <el-input v-model="ruleForm.phoneNumber"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email"></el-input>
      </el-form-item>
      <el-form-item label="部门" prop="department">
        <el-select v-model="ruleForm.department" placeholder="请选择部门">
          <el-option label="销售部" value="销售部"></el-option>
          <el-option label="人事部" value="人事部"></el-option>
          <el-option label="后勤部" value="后勤部"></el-option>
          <el-option label="财务部" value="财务部"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="身份" prop="permission">
        <el-select v-model="ruleForm.permission" placeholder="请选择身份">
          <el-option label="员工" value="员工"></el-option>
          <el-option label="管理员" value="管理员"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addTab('ruleForm')">添加员工</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" v-if="ps=='管理员'">
      <el-form-item label="工号" prop="userNumber">
        <el-input v-model="ruleForm.userNumber"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="ruleForm.sex" placeholder="请选择性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号码" prop="phoneNumber">
        <el-input v-model="ruleForm.phoneNumber"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addTab('ruleForm')">添加员工</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <router-link style="margin-left: 80%;font-size: large;" to="/manage/batchaddworker">批量添加</router-link>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        ps: this.$store.state.permission,
        ruleForm: {
          userNumber: '',
          name: '',
          sex: '',
          phoneNumber: '',
          email: '',
          department: '',
          permission: '',
          password: '123456',
          state: '正常'
        },
        rules: {
          name: [{
              required: true,
              message: '请输入姓名',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 10,
              message: '长度在 2 到 10 个字符',
              trigger: 'blur'
            }
          ],
          sex: [{
            required: true,
            message: '请选择性别',
            trigger: 'change'
          }],
          department: [{
            required: true,
            message: '请选择部门',
            trigger: 'change'
          }],
          userNumber: [{
            required: true,
            message: '请填写工号',
            trigger: 'blur'
          }],
          phoneNumber: [{
            required: true,
            message: '请填写电话号码',
            trigger: 'blur'
          }],
          email: [
            {
            required: true,
            message: '请填写邮箱地址',
            trigger: 'blur'
          },
          {
            type:'email',
            message: '请填写正确的邮箱地址',
            trigger: 'change',
          }],
          permission: [{
            required: true,
            message: '请选择身份',
            trigger: 'change'
          }],
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      addTab(formName) {
        this.FormVisible = false;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.ps == "超管") {
              let user = JSON.stringify(this.ruleForm);
              console.log(user);
              this.$axios
                .post('/api/taoyun/v1/SAdmin/userManage/AddUser?AdminId='+this.$store.state.userId, user)
                .then(res => {
                  if (res.data.code == "200") {
                    this.$message({
                      type: "success",
                      message: "添加成功"
                    });
                    this.$router.push({
                      path: '/manage/workerinfo',
                      query: {
                        AdminId: 16,
                      }
                    });
                  }
                  if (res.data.code == "500") {
                    if(res.data.msg=="该部门已设置了管理员！"){
                    this.$message({
                      type: "error",
                      message: "该部门已设置了管理员！"
                    });
                    }
                    else if(res.data.msg=="不好意思，该UserNumber已存在，请更换！"){
                    this.$message({
                      type: "error",
                      message: "不好意思，该UserNumber已存在，请更换！"
                    });
                    }
                    else{
                      this.$message({
                        type: "error",
                        message: "添加失败"
                      });
                    }
                  }
                })
                .catch(err => {
                  console.log(err);
                });
            }
            if (this.ps == "管理员") {
              this.ruleForm.department=this.$store.state.department;
              this.ruleForm.permission="员工";
              let user = JSON.stringify(this.ruleForm);
              console.log(user);
              this.$axios
                .post('/api/taoyun/v1/Admin/userManage/AddUser?Id='+this.$store.state.userId, user)
                .then(res => {
                  if (res.data.code == "200") {
                    this.$message({
                      type: "success",
                      message: "添加成功"
                    });
                    this.$router.push({
                      path: '/manage/workerinfo',
                      query: {
                        Department: this.$store.state.department,
                      }
                    });
                  }
                  if (res.data.code == "500") {
                    if(res.data.msg=="工号已存在，请更换！"){
                    this.$message({
                      type: "error",
                      message: "工号已存在，请更换！"
                    });
                    }else{
                      this.$message({
                        type: "error",
                        message: "添加失败"
                      });
                    }
                  }
                })
                .catch(err => {
                  console.log(err);
                });
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    },
    created(){
      console.log(this.$store.state.department);
    }
  }
</script>

<style>
</style>
